<template>
    <div>

        <el-button class="mt20 mb20" type="primary" size="medium" @click="add">添加</el-button>
        <el-button class="mt20 mb20" type="danger" size="medium" @click="paging">{{ info.all ? '展示数据' : '展示分页'
        }}</el-button>

        <!-- 列表 -->
        <list @edit="edit" :info="info"></list>

        <!-- 弹窗 -->
        <v-dialog ref="dialog" :info="info"></v-dialog>
    </div>
</template>
<script>
import list from './list.vue'
import vDialog from './dialog.vue'
import { mapActions, mapGetters } from 'vuex'
export default {
    data() {
        return {
            info: {
                isShow: false,   //弹窗
                title: '',  //标题
                isAdd: true,   //true是添加   false编辑
                all: true,   //true是分页  false全部
            }
        }
    },
    methods: {
        ...mapActions({
            countActions: 'goods/countActions',
            changeSize: 'goods/changeSize',
            listActions: 'goods/listActions'
        }),
        //添加显示弹窗
        add() {
            this.info.isShow = true
            this.info.title = '添加商品';
            this.info.isAdd = true
        },
        //编辑
        edit(id) {
            // console.log(id);
            this.info.isShow = true;
            this.info.title = '编辑商品'
            this.info.isAdd = false
            //获取ref  给dialog传id
            this.$refs.dialog.getDetail(id)
        },
        //不是分页
        paging() {
            if (this.info.all) {
                this.info.all = false  //全部
                this.countActions()   //查找的总数
                this.changeSize(this.total)  //一页要拿到几条数据
                this.listActions()   //更新商品列表
            } else {
                this.info.all = true  //分页
                this.changeSize(3)  //一页要拿到几条数据
                this.listActions()

            }
        }

    },
    mounted() {
        document.title = this.$route.meta.title
    },
    watch: {},
    computed: {
        ...mapGetters({
            total: 'goods/total',

        })
    },
    filters: {},
    components: {
        list,
        vDialog
    }
}
</script>
<style scoped></style>